<template>
    <div class="gvb_logo">
        <img src="/image/logo.jpg" alt="" />
        <div class="logo_head">
            <div>绮罗星</div>
            <div>Kiral</div>
        </div>
    </div>
</template>
<style lang="scss">
.gvb_logo {
    height: 90px;
    display: flex;
    padding: 20px;
    align-items: center;
    border-bottom: 1px solid var(--bg);
    overflow: hidden;
    transition: all 0.3s;

    img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        transition: all 0.3s;
    }

    .logo_head {
        margin-left: 20px;
        transition: all 0.3s color 1.0s;
        >div:nth-child(1) {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        >div:nth-child(2) {
            font-size: 12px;
        }
    }
}

.collapsed {
    .gvb_logo {
        padding: 2px;

        img{
            width: 42px;
            height: 42px;
        }
        .logo_head{
            display: none;
        }
    }
}
</style>